<!--  租金管理主界面-->
<template>
  <div class="">
    <el-card class="box-card">
      <div slot="header">
        <span>房屋合同明细</span>
      </div>
      <rent-form @getChartInfo="getChartInfo"></rent-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header">
        <span class="span">租金明细</span>
        <div class="clearfix">
          <template v-if="isHirePay === true">
            <el-button type="primary" @click="singleSubmitHireGuid">确认收租</el-button>
          </template>
          <template v-else>
            <el-button type="primary">打印发票</el-button>
            <el-button icon="el-icon-download" type="primary" @click="handleDownload">导 出</el-button>
          </template>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="select(activeName)" :visible.sync="stateChange">
        <el-tab-pane
          v-for="(item,index) in panelLabel"
          :key="index"
          :label="item.label"
          :name="item.name"
        >
          <!-- <rent-detail :chartGuid="listQuery.ChartGUID"></rent-detail> -->
          <el-table
            :data.sync="tableData"
            element-loading-text="稍等, 正加载中..."
            border=""
            fit
            highlight-current-row
            ref="multipletable"
            v-loading="listLoading"
            @selection-change="handleChange"
            type="expand"
          >
            <el-table-column align="center" type="selection" width="45"></el-table-column>
            <el-table-column align="center" prop="HireDate" label="所属日期" width="180"></el-table-column>
            <el-table-column align="center" prop="Hire" label="租金" width="180">
              <template slot-scope="scope">
                <template v-if="scope.row.Hire">
                  <p style="color:green">{{ scope.row.Hire }} 元</p>
                </template>
                <span v-else style="color:green">{{ scope.row.Hire }} 元</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="State" label="状态">
              <template slot-scope="scope">
                <template v-if="scope.row.State==1">
                  <p style="color:green">已交</p>
                </template>
                <span v-else style="color:red">未交</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="TaxesWay" label="交租方式">
              <template slot-scope="scope">
                <template v-if="scope.row.TaxesWay">
                  <p>{{ scope.row.TaxesWay }}</p>
                </template>
                <span v-else>
                  <p style="color:red">未知</p>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="instructions" label="说明">
              <template slot-scope="scope">
                <template v-if="scope.row.instructions">
                  <p style="color:green">{{ scope.row.instructions }}</p>
                </template>
                <span v-else>
                  <p style="color:red">未知</p>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="Operator" label="操作员">
              <template slot-scope="scope">
                <template v-if="scope.row.Operator">
                  <p style="color:green">{{scope.row.Operator}}</p>
                </template>
                <span v-else>
                  <p style="color:red">暂无</p>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="repayDate" label="操作日期"></el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 分页 -->
        <!-- <div style="float: right; ">
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.offset"
            :limit.sync="listQuery.limit"
            @pagination="getHireListInfo"
          />
        </div>-->
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  getHireList,
  getHirePay,
  getChartInfoRoom,
  insertHirePay
} from "@/api/rent";
import Pagination from "@/components/Pagination";
import rentForm from "@/views/rentManage/rentForm";

export default {
  components: { Pagination, rentForm }, //分页
  // inject: ['reload'],
  //import引入的组件需要注入到对象中才能使用
  data() {
    //这里存放数据
    return {
      Guid: this.$route.params.guid, // 获取首页传来的Guid值;
      isHirePay: true,
      guid: "",
      total: 0, // 分页页数
      RentalStandard: "",
      stateChange: false,
      listLoading: false, // 加载图案的状态 true：加载动画 flase： 清除加载动画
      activeName: "first", // 默认的选项卡点击事件为 first
      panelLabel: [
        { label: "未收详情明细", name: "first" },
        { label: "已收租金明细", name: "second" },
        { label: "租金缴纳明细", name: "third" }
      ],

      listQuery: {
        // send给后端未收租金页面的参数
        offset: 1,
        limit: 10,
        state: 0,
        ChartGUID: ""
      },
      tableData: [],
      pagesInfo: [],
      selectionData: [],
      formMap: new Map(),
      chartInfo: Object
    };
  },
  created() {
    // this.formMap.set("user", "useruser");
    // console.log("map", this.formMap);
    // console.log("map", this.formMap.has('user'));
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //合同信息
    getChartInfo(info) {
      this.listLoading = true;
      this.listQuery.ChartGUID = info.ChartGUID;
      console.log("chartguid", info.ChartGUID);
      this.select("first");
    },
    select(type) {
      //租金详情
      switch (type) {
        case "first":
          this.isHirePay = true;
          this.activeName = "first";
          this.listQuery.state = 0;
          // this.listQuery = Object.assign({});
          this.getHireListInfo();
          break;
        case "second":
          this.isHirePay = false;
          this.activeName = "second";
          this.listQuery.state = 1;
          this.getHireListInfo();
          break;
        case "third":
          this.isHirePay = false;
          this.activeName = "third";
          getHirePay(this.listQuery).then(res => {});
          break;
        default:
          console.log("default");
          break;
      }
    },

    // 根据 autoGetChartInfo 方法返回的 ChartGUID 调用 getHireList 接口查询 HireList 表
    getHireListInfo() {
      getHireList(this.listQuery).then(response => {
        if (response.body != null) {
          this.tableData = response.body.rows;
          this.total = response.body.total;
          this.listLoading = false;
        } else {
          this.listLoading = false;
        }
      });
    },
    // 收取单个或多个租金
    singleSubmitHireGuid() {
      insertHirePay(this.selectionHireGUID).then(response => {
        if (response.code === 100) {
          this.getHireListInfo();
        } else {
          alert("收租失败");
        }
      });
    },

    // 获取选中租金, 一行的信息并将hireGUID Send 给 Server
    handleChange(val) {
      let HireGUID = [];
      if (val.length > 0) {
        this.selectionData = val;
        for (let index = 0; index < this.selectionData.length; index++) {
          HireGUID.push(this.selectionData[index].HireGUID);
        }
        this.selectionHireGUID = HireGUID;
      }
    },
    //导出
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = ["操作日期", "操作员", "租金"];
        const filterVal = ["OptDate", "Operator", "Hire"];
        this.listQuery["chartGUID"] = this.chartGUID;
        this.listQuery["state"] = 1;
        this.listQuery["limit"] = 100;
        this.getHireListInfo(this.listQuery);
        getHireList(this.listQuery).then(response => {
          console.log("response", response);
        });

        const data = this.formatJson(filterVal, this.tableData);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "asset-list"
        });
        console.log("excel", excel);
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
  }
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.box-card {
  margin: 20px;
}
.clearfix {
  float: right;
}
</style>